<script lang="ts" setup>
import aj from './aj/index.vue'
import ysp from './ysp/index.vue'
import ajwsgl from './ajwjgl/index.vue'
import yspwjgl from './yspwjgl/index.vue'
import gdglService from '@/api/gdgl'
import ajxx from './aj/components/ajxx.vue'
import mlxx from './aj/components/mlxx.vue'
import ryxx from './aj/components/ryxx.vue'
import yspxx from './ysp/components/yspxx.vue'
import { useRoute } from 'vue-router'
import wsjzglService from '@/api/wsjzgl'
import yspglService from '@/api/yspgl'
import { ref, onMounted, nextTick, computed } from 'vue'
import { useMainStore } from '@/store/main'
import { mlxxMainStore } from '@/store/mlxx'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router'
import gdgzDialog from '@/components/queryTable/table/dialogs/gdgz-dialog.vue'
import zzmlDialog from '@/views/gdgl/jcgsh/component/gdzl/dialog/zzml-dialog.vue'
import gddjbDialog from '@/components/queryTable/table/dialogs/gddjb-dialog.vue'
import thshDialog from '@/components/thsh-dialog.vue'
import tjshImg from '@/assets/images/tjsh.png'
import thshImg from '@/assets/images/tuihui-zl.png'
import gdgzImg from '@/assets/images/gdgz.png'
import gddjbImg from '@/assets/images/gddjb-zl.png'
import zzmlImg from '@/assets/images/zzml-zl.png'

// 获取ref
const ajwsglRef = ref()
const ajAjxxRef = ref()
const ajRyxxRef = ref()
const ajMlxxRef = ref()
const yspxxRef = ref()
const ajRef = ref()
const yspRef = ref()
const yspwjglRef = ref()
const gdgzDialogRef = ref<InstanceType<typeof gdgzDialog>>()
const zzmlDialogRef = ref<InstanceType<typeof zzmlDialog>>()

const route = useRoute()
const store = useMainStore()
const mlxxStore = mlxxMainStore()
// 入参

// 生命周期
onMounted(() => {
  handleClick('first')
  // 归档状态查询
  getAjzt()
})

// 归档状态查询
const getAjzt = () => {
  const params = {
    ajbh: route.query.ajbh,
  }
  gdglService
    .getAjzt(params)
    .then((res) => {
      mlxxStore.savegdztData(res.data)
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 返回
 */
const goBack = () => {
  router.push({
    path: route.query.route as string,
    query: {
      prePage: route.query.jumpFrom,
      cs:
        route.query.jumpFrom === 'tgjl' &&
        (route.query.route === '/ajgd' || route.query.route === '/gdyj')
          ? JSON.stringify(route.query)
          : '',
    },
  })
}

// 点击审核通过按钮
const submitProcess = () => {
  ElMessageBox.confirm('是否审核通过', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      gdxxList: [
        {
          ajbh: route.query.ajbh as string,
          bmsah: route.query.bmsah as string,
          gdjlbh: route.query.gdjlbh as string,
        },
      ],
      shjg: '1',
      shthyy: '',
      shthyydm: '',
      shthyymc: '',
    }
    gdglService
      .saveGdshjl(params)
      .then(() => {
        if (activeName.value === 'first') {
          wjlxChange()
        }
        if (activeName.value === 'second') {
          ysplbChangeEvent()
        }
        ElMessage.success('审核成功')
        goBack()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}

// 点击审核退回
const thshDialogRef = ref<InstanceType<typeof thshDialog>>()
const openShthDialog = () => {
  thshDialogRef.value?.openDialog([route.query] as any)
}

/*
 * 打开归档跟踪弹框（调用案件归档下的弹框）
 */
const openGdgzDialog = () => {
  gdgzDialogRef.value!.openDialog(route.query.gdbh as string)
}

// 打开纸质目录弹窗
const openZzmlDialog = () => {
  zzmlDialogRef.value!.openDialog()
}

/*
 * 打开文书弹框
 */
const gddjbDialogRef = ref<InstanceType<typeof gddjbDialog>>()
const openGddjbDialog = () => {
  gddjbDialogRef.value!.openDialog([route.query.gdbh] as any, '归档登记表')
}

const shDisabled = computed(() => {
  if (route.query.route === '/jcgsh') {
    return mlxxStore.gdztData.gdjddm !== 'gd0180002'
  }
  if (route.query.route === '/dacy') {
    return mlxxStore.gdztData.gdjddm !== 'gd0180003'
  }
  if (route.query.route === '/dafy') {
    return mlxxStore.gdztData.gdjddm !== 'gd0180004'
  }
  return true
})
//按钮列表
const buttonList = computed(() => [
  {
    url: tjshImg,
    name: '审核通过',
    click: submitProcess,
    disabled: shDisabled.value,
  },
  {
    url: thshImg,
    name: '审核退回',
    click: openShthDialog,
    disabled: shDisabled.value,
  },
  {
    url: zzmlImg,
    name: '纸质目录',
    click: openZzmlDialog,
  },
  // {
  //   url: 'tjsh',
  //   name: '提交审核',
  //   click: () => null,
  // },
  {
    url: gdgzImg,
    name: '归档跟踪',
    click: openGdgzDialog,
  },
  {
    url: gddjbImg,
    name: '归档登记表',
    click: openGddjbDialog,
  },
])

const activeName = ref('first')
const handleClick = (tab: any) => {
  switch (tab) {
    case 'first':
      ajRef.value?.init()
      break
    case 'second':
      yspRef.value?.init()
      break
    // case 'third':
    //   dzjzRef.value?.init()
    //   break
    default:
      break
  }
}

const leftSmall = ref<boolean>(false)
const rightSmall = ref<boolean>(false)

const dragFlag = ref<boolean>(false)
const moveLenLeft = ref<number>(0)
const moveLenRight = ref<number>(0)
/*
 * 拖拽事件
 */
// 初始距离
// 是否按下
const dragstart = () => {
  dragFlag.value = true
}
const dragLeft = (e: any) => {
  if (!dragFlag.value) {
    return
  }
  if (e.clientX && e.clientX - 16 <= 300) {
    moveLenLeft.value = 300
  } else if (e.clientX && e.clientX - 16 >= 400) {
    moveLenLeft.value = 400
  } else {
    moveLenLeft.value = e.clientX - 16
  }
}
const screenRef = ref<any>()
const dragRight = (e: any) => {
  const screenWidth = JSON.parse(JSON.stringify(screenRef.value.offsetWidth || 0))
  if (!dragFlag.value || !e.clientX) {
    return
  }
  if (screenWidth - e.clientX && screenWidth - e.clientX + 16 <= 300) {
    moveLenRight.value = 300
  } else if (screenWidth - e.clientX && screenWidth - e.clientX + 16 >= 400) {
    moveLenRight.value = 400
  } else {
    moveLenRight.value = screenWidth - e.clientX + 16
  }
}
const dragend = () => {
  dragFlag.value = false
}

const rightTabActiveName = ref('ajxx')
// 案卷传递过来方法
const nodeClick = (data: any, mlList?: any[]) => {
  store.saveNodeTreeData(data)
  // ajwsglRef.value.indexChange(0)
  wjlxdm.value = 'gd0010001'
  if (data.cj === '1') {
    rightTabActiveName.value = 'ajxx'
    rightTabChangeTabs('ajxx')
    mlList && getWjList(mlList)
  } else if (data.cj === '2') {
    rightTabActiveName.value = 'mlxx'
    rightTabChangeTabs('mlxx')
    mlList && getWjList(mlList)
  } else {
    ajwsglRef.value.getWjxqxx([])
  }
}

// 更新当前预览的文书页码
const updatePage = (wjbh: string) => {
  const i = wjList.value.findIndex((wj) => wj.wjbh === wjbh)
  ajwsglRef.value.indexChange(i)
}

// 音视频图片传递过来方法
const yspNodeClick = (data: any) => {
  store.saveNodeTreeData(data)
  yspwjglRef.value?.closeDetail()
  if (data.cj === 1 || !data.cj) {
    yspwjglRef.value.getWjxqxx([])
    yspxxRef.value.getWjxqxx([])
    return
  }
  // 判断
  if (data.fbh === 'gd0020002' || data.fbh === 'gd0020001') {
    getYspList()
    yspRef.value.againTreeData()
  } else {
    getPhotoList()
    yspRef.value.againTreeData()
  }
}

const wjlxdm = ref('gd0010001')
const wjlxChangeEvent = (data: string) => {
  wjlxdm.value = data
  // getWjList()
  ajRef.value.againTreeData()
}

const ysplbChangeEvent = () => {
  getYspList()
}

const rightTabChangeTabs = (tab: string) => {
  switch (tab) {
    case 'ajxx':
      ajAjxxRef.value?.init()
      break
    case 'ryxx':
      ajRyxxRef.value?.init()
      break
    case 'mlxx':
      ajMlxxRef.value?.init()
      break
    default:
      break
  }
}

// 案卷复卷列表
const wjList = ref<any[]>([])
const getWjList = (mlList: any[]) => {
  // 以一个卷为单位连续查看
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh,
  }
  wsjzglService
    .queryWjList(params)
    .then((res) => {
      nextTick(() => {
        const wjListArr: any[] = []
        // 按目录顺序给文件排序
        mlList?.forEach((ml) => {
          res.data.forEach((wj) => {
            if (wj.mlbh === ml.bh) {
              wjListArr.push(wj)
            }
          })
        })
        wjList.value = wjListArr
        ajwsglRef.value.getWjxqxx(wjListArr)
        const i = mlList.findIndex((ml) => ml.bh === store.$state.nodeTreeData?.bh)
        if (i === 1) {
          ajwsglRef.value.indexChange(mlList[0].wjsl)
        } else if (i > 1) {
          ajwsglRef.value.indexChange(
            mlList.slice(0, i).reduce((pre, next) => {
              return pre + next.wjsl
            }, 0),
          )
        }
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 音视频目录列表
const getYspList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getYspmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
        yspxxRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 获取图片目录列表
const getPhotoList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getZpmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
        yspxxRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}
// 刷新   删除 上传文件
const wjlxChange = () => {
  ajRef.value.againTreeData()
}
</script>
<template>
  <div class="container" ref="screenRef">
    <div class="top">
      <div class="header">
        <div class="header-left">
          <img class="logo-img" src="@/assets/images/case.png" alt="" />
          <p>{{ route.query.ajmc }}</p>
          <p class="header-bmsah">【{{ route.query.bmsah }}】</p>
          <div class="header-jc">
            <el-icon size="14" color="#fff"><CircleCheck /></el-icon>
            <span> 检测通过 </span>
          </div>
        </div>

        <div class="header-right">
          <button
            class="buttonBox"
            v-for="(item, index) in buttonList"
            :key="index"
            @click="item.click"
            v-show="!item.disabled"
          >
            <img :src="item.url" alt="" />
            <div
              :style="{
                color: item.disabled ? '#b8bdc3' : '#fff',
                cursor: item.disabled ? 'not-allowed' : 'pointer',
              }"
            >
              {{ item.name }}
            </div>
          </button>
          <div class="buttonBox" style="cursor: pointer" @click="goBack">
            <el-icon style="vertical-align: -5px" size="20">
              <Back />
            </el-icon>
            返回
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div
        class="left"
        :class="{ small: leftSmall }"
        :style="{ width: moveLenLeft ? moveLenLeft + 'px' : '' }"
      >
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-change="handleClick"
          type="card"
          v-show="!leftSmall"
        >
          <el-tab-pane label="案卷" name="first">
            <aj ref="ajRef" @nodeClick="nodeClick" @updatePage="updatePage" />
          </el-tab-pane>
          <el-tab-pane label="音像" name="second">
            <ysp ref="yspRef" @nodeClick="yspNodeClick" />
          </el-tab-pane>
          <!-- <el-tab-pane label="电子卷宗" name="third">
            <dzjz ref="dzjzRef" @nodeClick="dzjzNodeClick" />
          </el-tab-pane> -->
        </el-tabs>
        <div class="left-img" @click="leftSmall = !leftSmall">
          <img src="@/assets/images/zsq.png" alt="" v-if="!leftSmall" />
          <img src="@/assets/images/ysq.png" alt="" v-else-if="leftSmall" />
        </div>
      </div>
      <!--拖动div-->
      <div
        class="search-drag-box"
        :draggable="true"
        title="可左右拖动"
        @dragstart="dragstart()"
        @dragend="dragend()"
        @drag="dragLeft($event)"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>
      <div class="center">
        <ajwsgl
          ref="ajwsglRef"
          v-if="activeName === 'first'"
          @wjlxChangeEvent="wjlxChangeEvent"
          @wjlxChange="wjlxChange"
        />
        <yspwjgl
          ref="yspwjglRef"
          v-if="activeName === 'second'"
          @ysplbChangeEvent="ysplbChangeEvent"
        />
        <!-- <dzjzwjgl v-if="activeName === 'third'" /> -->
      </div>
      <!--拖动div-->
      <div
        class="search-drag-box"
        :draggable="true"
        title="可左右拖动"
        @dragstart="dragstart()"
        @dragend="dragend()"
        @drag="dragRight($event)"
        v-if="activeName === 'first' || activeName === 'second'"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>
      <div
        v-if="activeName === 'first' || activeName === 'second'"
        class="right"
        :class="{ small: rightSmall }"
        :style="{ width: moveLenRight ? moveLenRight + 'px' : '' }"
      >
        <div class="right-img" @click="rightSmall = !rightSmall">
          <img src="@/assets/images/ysq.png" alt="" v-if="!rightSmall" />
          <img src="@/assets/images/zsq.png" alt="" v-else-if="rightSmall" />
        </div>

        <el-tabs
          v-if="activeName === 'first'"
          type="card"
          v-model="rightTabActiveName"
          @tab-change="rightTabChangeTabs"
        >
          <el-tab-pane label="案卷信息" name="ajxx">
            <ajxx ref="ajAjxxRef"></ajxx>
          </el-tab-pane>
          <el-tab-pane label="人员信息" name="ryxx">
            <ryxx ref="ajRyxxRef"></ryxx>
          </el-tab-pane>
          <el-tab-pane label="目录信息" name="mlxx">
            <mlxx ref="ajMlxxRef"></mlxx>
          </el-tab-pane>
        </el-tabs>

        <el-tabs v-if="activeName === 'second'" type="card">
          <el-tab-pane label="音像信息">
            <yspxx ref="yspxxRef"></yspxx>
          </el-tab-pane>
        </el-tabs>

        <!-- <el-tabs
          v-if="activeName === 'third'"
          type="card"
          v-model="dzjzTabActiveName"
          @tab-change="dzjzTabChangeTabs"
        >
          <el-tab-pane label="案卷信息" name="dzjzAjxx">
            <dzjz-ajxx></dzjz-ajxx>
          </el-tab-pane>
          <el-tab-pane label="人员信息" name="dzjzRyxx">
            <dzjz-ryxx></dzjz-ryxx>
          </el-tab-pane>
          <el-tab-pane label="目录信息" name="dzjzMlxx">
            <dzjz-mlxx></dzjz-mlxx>
          </el-tab-pane>
        </el-tabs> -->
      </div>
    </div>
    <!--归档跟踪-->
    <gdgz-dialog ref="gdgzDialogRef" />
    <!-- 纸质目录弹窗 -->
    <zzml-dialog ref="zzmlDialogRef"></zzml-dialog>
    <!--退回弹框-->
    <thsh-dialog ref="thshDialogRef" @refresh="goBack" />
    <!--归档登记表弹窗-->
    <gddjb-dialog ref="gddjbDialogRef" />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .top {
    .header {
      color: #fff;
      width: 100%;
      height: 50px;
      background-image: linear-gradient(0deg, #0093df 0%, #0057a0 100%);
      display: flex;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;
        padding: 0 0 0 10px;
        .logo-img {
          margin: 0 8px;
        }
        .header-bmsah {
          color: #8bcbfd;
        }
        .header-jc {
          padding: 1px 5px;
          font-size: 12px;
          background-color: #16c36f;
          border-radius: 3px;
          display: flex;
          align-items: center;
          margin-top: 2px;
          span {
            padding-left: 3px;
          }
        }
      }

      .header-right {
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-right: 20px;
        .buttonBox {
          margin-left: 20px;
          display: flex;
          align-items: center;
          padding: 0 0;
          background-color: transparent;
          color: #fff;
          white-space: nowrap;
          font-size: 14px;
          cursor: pointer;
          img {
            padding-right: 5px;
          }
          &:focus {
            outline: none;
          }
        }
      }
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 50px);
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #ecf1fa;

    .left {
      // width: 20%;
      width: 350px;
      height: 100%;
      // border: 1px solid red;
      position: relative;
      background-color: #fff;
    }

    .left > .left-img {
      position: absolute;
      right: 0;
      top: calc(50% - 27px);
      z-index: 9;
      cursor: pointer;
    }

    .center {
      // width: 54%;
      flex: 1;
      flex-shrink: 0;
      background-color: #fff;
    }

    .right {
      width: 350px;
      height: 100%;
      // border: 1px solid pink;
      position: relative;
      background-color: #fff;
    }

    .right > .right-img {
      position: absolute;
      left: 0;
      top: calc(50% - 27px);
      z-index: 9;
      cursor: pointer;
    }
  }

  :deep(.el-tabs__content) {
    padding: 10px;
  }
}

.small {
  width: 16px !important;
  border: none !important;
  .el-tabs {
    display: none;
  }
}

.search-drag-box {
  margin: 0 1px;
  flex-shrink: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  .dragImg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .dargIcon {
      font-size: 29px;
      transform: rotate(90deg);
    }
  }
}
</style>
